<template>
  <div>
    <!-- 头部组件 -->
    <table-header-title ref="headerTitle" :on-back-btn="onBack">
      <template #header>
        <slot name="header" />
      </template>
    </table-header-title>
    <!-- 搜索组件 -->
    <table-header-search
      ref="headerSearchRef"
      :advanced-search="advancedSearch"
      :label-position="labelPosition"
    >
      <template #search>
        <slot :onSearch="onSearchChange" name="search" />
      </template>
      <template #searchMenu>
        <slot name="searchMenu" />
      </template>
    </table-header-search>
    <!--表格内容-->
    <div>
      <!--新增等按钮-->
      <div v-show="menu">
        <slot name="menuLeft" />
      </div>
      <!--表格-->
      <slot name="GXTable" />
      <!-- 分页 -->
      <div>
        <table-page v-if="pageFlag" ref="tablePageRef" />
      </div>
    </div>
  </div>
</template>

<script>
import tableHeaderTitle from "./table-title.vue";
import tableHeaderSearch from "./table-search.vue";
import tablePage from "./table-page.vue";
import { filterObj, restoreInitialValue } from "@/assets/js/common";
import {
  provide,
  defineComponent,
  reactive,
  watch,
  toRefs,
  nextTick,
  ref,
  onMounted,
} from "vue";
export default defineComponent({
  name: "Index",
  components: {
    tableHeaderTitle,
    tableHeaderSearch,
    tablePage,
  },
  props: {
    /* 搜索参数*/
    searchForm: {
      type: Object,
      default() {
        return {};
      },
    },
    /* 返回按钮*/
    onBack: {
      type: Function,
      default: null,
    },
    /* 是否展示分页*/
    pageFlag: {
      type: Boolean,
      default: true,
    },
    /* 是否展示高级搜索*/
    advancedSearch: {
      type: Boolean,
      default: true,
    },
    /* 是否展示操作按钮 */
    menu: {
      type: Boolean,
      default: false,
    },
    /* 搜索框label宽度*/
    searchLabelWidth: {
      type: String,
      default: "",
    },
    // label显示
    labelPosition: {
      type: String,
      default: "",
    },
  },
  emits: ["on-load"],
  setup(props, context) {
    const tablePageRef = ref(null);
    const headerSearchRef = ref(null);
    const state = reactive({
      pageFlag: Boolean,
      searchData: {}, // 搜索条件初始值存储
      page: {
        total: 0, // 总页数
        pageNo: 1, // 当前页数
        pageSize: 10, // 每页显示多少条
      },
    });
    watch(
      () => state.page,
      () => {
        // 监听分页
        tablePageRef.value.pageInit();
      },
      { deep: true }
    ),
      onMounted(() => {
        state.searchData = props.searchForm;
        state.pageFlag = props.pageFlag;
        pageChange();
      });
    // 查询条件
    const getQueryParams = () => {
      const param = Object.assign({}, props.searchForm);
      param.pageNo = state.page.pageNo;
      param.pageSize = state.page.pageSize;
      return filterObj(param);
    };
    const pageTotal = (total) => {
      state.page.total = total;
    };
    // 分页切换时
    const pageChange = () => {
      nextTick(() => {
        context.emit("on-load", getQueryParams(), pageTotal);
      });
    };
    // 搜索
    const onSearchChange = () => {
      pageChange();
    };
    // 清空
    const searchReset = () => {
      restoreInitialValue(props.searchForm);
      pageChange();
    };
    provide("tableCrud", state);
    provide("onSearchChange", onSearchChange);
    provide("searchReset", searchReset);
    provide("pageChange", pageChange);
    return {
      ...toRefs(state),
      // ref
      tablePageRef,
      headerSearchRef,
      // Func
      pageTotal,
      getQueryParams,
      pageChange,
      onSearchChange,
      searchReset,
    };
  },
});
</script>

<style scoped></style>
